<template>
  <div class="my-produ">
    <!-- Main -->
    <div class="my-produ-nav">
      <SearchTop @search="searchComplex"></SearchTop>
    </div>

    <div class="my-produ-list">
      <el-row
        class="my-produ-list-box"
        :gutter="34"
        type="flex"
        justify="space-around"
        style="flex-wrap: wrap"
      >
        <el-col
          class="my-produ-list-box-item"
          style="width: auto"
          v-for="item in lists"
          :key="item.id"
        >
          <div class="produ-item">
            <produ
              :key="'my-produ-' + item.site_id"
              :item="item"
              :produType="'ADMINPRODU'"
            ></produ>
          </div>
        </el-col>
        <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
      </el-row>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="curPage"
      :page-size="pageSize"
      :page-count="totalPage"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import Produ from "@/views/child/admin/common/produ.vue";
import SearchTop from "@/views/child/admin/common/search-top.vue";
import { LocalStorage } from "@/utils/localstorage";
import { useWebUserStore } from "@/store/web/user";
const useWebUser = useWebUserStore();
export default {
  setup() {
    return {
      /* 分页 */
      curPage: 1,
      pageSize: 20,
      /* 搜索 */
      options: null, // h5type,keywords,tags
    };
  },
  components: {
    Produ,
    SearchTop,
  },
  computed: {
    lists() {
      return useWebUser.myLists;
    },
    listsData() {
      return useWebUser.myListsData;
    },
    userid() {
      return useWebUser.userid;
    },
    totalPage() {
      return this.listsData?.totalPage || 0;
    },
  },
  beforeMount() {
    // get localStorage curPage
    this.curPage = this.getAdminLocalStorage("curPage");
    this.options = this.getAdminLocalStorage("options");

    // searchComplex
    this.searchComplex(
      {
        ...this.options,
      },
      this.curPage
    );
  },
  methods: {
    /* 翻页 / 数据加载 */
    setAdminLocalStorage(setKey, val) {
      // set admin localStorage
      // 定义 user 专属
      const key = "admin_" + this.userid;

      // 判断是否存在 admin localStorage
      let adminStorage = LocalStorage.getItem(key);
      if (!adminStorage) adminStorage = {};
      adminStorage[setKey] = val;

      // reset
      LocalStorage.setItem(key, adminStorage);
    },
    getAdminLocalStorage(getKey) {
      // get admin produ curPage
      // 定义 user 专属
      const key = "admin_" + this.userid;

      // 判断是否存在 admin  localStorage
      let adminStorage = LocalStorage.getItem(key);
      return adminStorage ? adminStorage[getKey] : undefined;
    },

    handleCurrentChange(val) {
      // searchComplex => getMyLists
      this.searchComplex(
        {
          ...this.options,
        },
        val
      );
    },
    searchComplex(options, curPage, callback) {
      // 0. curPage
      this.curPage = curPage && !isNaN(curPage) ? curPage : 1;
      this.setAdminLocalStorage("curPage", this.curPage);

      // 1. 暂存 options
      this.options = options;
      this.setAdminLocalStorage("options", this.options);

      // 2. getMyLists
      useWebUser.getMyLists({
        ...options,
        pageSize: this.pageSize,
        page: this.curPage,
        callback: callback || null,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/admin-produ.scss";
</style>
